<!-- 重新分配弹出框 -->
<template>
  <div>
    <a-modal
      v-model:visible="dialogVisible"
      @cancel="handleCancel"
      :on-before-ok="handleBeforeOk"
      unmountOnClose
    >
      <template #title>重新分配销售人员</template>
      <div>
        <a-space direction="vertical" size="large">
          <a-select
            v-model="currLevel"
            :style="{ width: '320px' }"
            placeholder="请选择销售员"
          >
            <a-option
              v-for="item in levelList"
              :value="item.name"
              :key="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watchEffect } from 'vue';
  import { GetClientSettingInfo } from '@/api/order-management/client-management/base-setting/index';
  

  const props = withDefaults(
    //参数说明
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const emits = defineEmits(['update:visible', 'changeSalesEmit']);

  const dialogVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });

  // level类型
  type level = {
    id: number; // id
    name: string; // 名字
  };

  const levelList = ref<level[]>([]);

  // 获取级别数据
  const getLevelData = async () => {
    try {
      const { customerLevel } = await GetClientSettingInfo();
      levelList.value = customerLevel;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  watchEffect(() => {
    if (dialogVisible.value) getLevelData();
  });

  let currSales = ref(''); // 储存当前选择的销售员
  // 点击确定
  const handleBeforeOk = async () => {
    emits('changeSalesEmit', currSales.value);
  };

  // 取消
  const handleCancel = () => {
    dialogVisible.value = false;
  };
</script>

<style scoped lang="less">
</style>
